import * as React from 'react';
import { ConfigProvider, Button } from '@ali/deep';
import PropTypes from 'vision-types';
import zhCN from './locale/zh-cn';

interface IProps {
  deepPrefix: string;
  device: string;
  locale: object;
}

class DeepExampleComponent extends React.Component<IProps> {
  public static displayName = 'ExampleComponent';

  // for low-code
  public static propTypes = {
    deepPrefix: PropTypes.string,
    device: PropTypes.string,
    locale: PropTypes.object,
  };

  public static defaultProps = {
    deepPrefix: 'deep-',
    device: 'desktop',
    locale: zhCN,
  };

  constructor(props: IProps) {
    super(props);
    this.state = {};
  }

  public render() {
    const { deepPrefix, device, locale } = this.props;
    console.log('Current operating environment：', device);
    console.log('Current language resources：', locale);
    return (
      <div className={`${deepPrefix}example-component`}>
        Hello ExampleComponent
        <Button type='primary'>OK</Button>
      </div>
    );
  }
}

export default ConfigProvider.config(DeepExampleComponent, {});
